<template>
	<view>
		<view class="mapbox" :class="showHouse?'hide':''">
			<map :scale="scale" @tap="closewrap"
			style="width: 100vw; height: 100%;" 
			enable-3D="true" 
			:enable-satellite="mapTpye"
			:show-location="true" 
			id="map" ref="map"
				:markers="markers" 
				@callouttap="handleCallout" 
				@regionchange="handleRegionChange" 
				:longitude="longitude"
				:latitude="latitude">
			</map>
		</view>
		<view class="flex-box flex-center areas">
			<navigator hover-class="none" url="/pages/home/locate/locate" open-type="navigateTo">
				<view class="city-picker flex-box flex-center">{{now_city}}</view>
			</navigator>
			<view hover-class="none">
				<view class="flex-box inputbox">
					<image @click="doSearch" src="/static/icon/icon_search-g.png" class="icon_search"></image>
					<input @confirm="doSearch" v-model="keyword" confirm-type="search" class="areainput flex-grow-1" placeholder="请输入你要查找的楼盘或区域" placeholder-class="colc"></input>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="houselist" :class="showHouse?'show':''">
			<view class="closebox" @click="closewrap">
				<image src="/static/icon/icon_close.png" class="icon_close"></image>
			</view>
			
			<!-- 新房二手房 -->
			<template v-if="houseList.length > 0 ">
		
				<view class="houseitem flex" @click="goToDe(item)" v-for="(item,index) in houseList" :key="index">
					<view class="houseimg">
						<u--image :showLoading="true" :lazy-load="true" :src="item.image_text" radius="10rpx" width="240rpx" height="190rpx" mode="aspectFill"></u--image>
					</view>
					<view class="flex-grow-1">
						
						<view class="flex-box">
							<view class="housename m-ellipsis flex-grow-1 fwb">{{item.name}}</view>
							<view class="sale_type1">{{ item.sale_state_text }}</view>
						</view>
						<!-- 新房 -->
						<block v-if="item.house_type_id==16">
						
							<view class="flex-box">
								<view class="housename m-ellipsis flex-grow-1" style="font-size:26rpx;color:#666;">参考均价 
									<text style="color:#f8532f;margin-left:10rpx;"> 约{{ item.unit_price }}元/㎡</text>
								</view>
							</view>
							<view class="flex-box">
								<view class="housename m-ellipsis flex-grow-1" style="font-size:26rpx;color:#666;">建筑面积 
									<text style="color:#f8532f;margin-left:10rpx;"> {{ item.min_space }}㎡</text>
								</view>
							</view>
							<view class="flex-box">
								<view class="housename m-ellipsis flex-grow-1" style="font-size:26rpx;color:#666;">楼盘地址 
									<text style="margin-left:10rpx;"> {{ item.region + item.addr }}</text>
								</view>
							</view>
						</block>
						
						<block v-else>
							
							<view class="area-size">
								
								<text class="pr20">{{ item.list_labels?item.list_labels:'' }}</text>
								<text v-if="false">| {{ item.alias_name ? item.alias_name : '' }}</text>
								
								<text>建面{{ item.min_space }}㎡</text>
							</view>
							<view class="targetbox flex">
								<view class="targetitem" v-for="(targets, index1) in item.house_tag_ids_text_arr">
									{{targets}}
								</view>
								<view v-if="item.rank_json_text" class="number_one">
									<image src="/static/icon/icon_reward.png" class="icon_reward"></image>
									<view>{{ item.rank_json_text }}</view>
								</view>
							</view>
						
						</block>
						
						<view class="housecost fwb">
							<!-- 二手房 -->
							<text class="pr20" v-if="item.house_type_id==1">{{ item.price }}万</text>
							{{ item.first_price_msg ? item.first_price_msg : '' }}
							<text class="junjia" v-if="item.house_type_id==1">{{item.unit_price}}元/平</text>
							
						</view>
						
					</view>
				</view>
		
				<u-loadmore :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉"
					nomore-text="没有更多了" />
			</template>
			<!-- 新房二手房 结束 -->
			
			<template v-if="false">
			<navigator :url="'/pages/rental/renting/renting?id=' + item.id" v-for="(item,index) in rentalList.data" open-type="navigateTo"
				class="houseitem flex-box flex-row contact">
				<image :lazy-load="true" :src="item.image_text" class="houseimg"
					mode="aspectFill"></image>
				<view class="flex-grow-1">
					<view class="housename single-line"><text
							class="fs30 pb20">{{ item.name }}</text></view>
					<view class="flex-box flex-row flex-between">
						<text class="fs24 col89">{{ item.village2.city }} | {{item.village2.region }}</text>
						<text class="fs24 col89">{{ item.space }}㎡</text>
					</view>
					<view class="targetbox flex-box flex-row">
						<view class="targetitem"
							v-for="(targets, index) in item.house_tag_ids_text_arr">
							<text class="blue fs20">{{targets.tag.name}}</text>
						</view>
					</view>
					<view class="housecost flex-box flex-row"><text class="red fs24">¥</text><text
							class="red fs34">{{ item.price }}</text>
							<!-- <text class="red fs24">/㎡</text> -->
					</view>
				</view>
			</navigator>
			</template>
		</view>
		<!-- 楼盘 -->
		<!-- 1二手房 -->
		<view class="fix-btn fix-btn1" :class="{'active': tabIdx == 1}" @click="tabClick(1)">二手房</view>
		<!-- 租房 -->
		<!-- 16新房 -->
		<view class="fix-btn fix-btn2" :class="{'active': tabIdx == 16}" @click="tabClick(16)">新房源</view>
		
		
		<view class="fix-btn fix-btn3 " :class="{'active': mapTpye}"  @click="mapClick(1)">卫星图</view>
		<view  class="fix-btn-left fix-btn3 "  :class="{'active': !mapTpye}"  @click="mapClick(0)">普通图</view>
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');
	let mapCtx = null;
	let tmpCenter = {latitude: 43.917414,longitude: 116.067398}
	let firstload = true;

	export default {
		data() {
			return {
				now_city: '锡林郭勒盟',
				now_region: '锡林浩特市',
				now_street: '',
				villageId: 0,
				longitude: tmpCenter.longitude,		//116.067398,
				latitude: tmpCenter.latitude,		//43.917414,
				scale: 13,//市=10,区=14,街道=16
				markers: [],
				showHouse: false,
				
				mapTpye:0,

				houseList: [],
				// 房源列表
				rentalList: {
					total: 0,
					current_page: 0,
					last_page: 1,
					data:[]
				},
				regionData: [],
				keyword: '',
				now_house_index: 0,

				id: 0, // 使用 marker点击事件 需要填写id
				min_lat: "",
				max_lat: "",
				min_lng: "",
				max_lng: "",
				tabIdx:1,//1二手房  16新房
	
				currentLevel: 2, // 新增：当前层级 1=市级, 2=区级, 3=街道级
				regionStack: [], // 新增：区域堆栈，用于记录导航路径
				
				clickCenter: { // 新增：记录点击的中心点
					longitude: 0,
					latitude: 0
				},
				userControlledZoom: false, // 新增：标记用户是否在手动控制缩放
			};
		},
		onLoad: function(options) {
			this.now_city = uni.getStorageSync('now_city') || '锡林郭勒盟';
			this.tabIdx = options.tabIdx || 1;
			this.refresh();
		},
		onShow: function() {
			var now_city = uni.getStorageSync('now_city') || '锡林郭勒盟';
			if (now_city != this.now_city) {
				this.now_city = now_city
				this.refresh();
			}
		},
		onReady() {
			mapCtx = uni.createMapContext('map');
			// 二手房
			// this.initVillageData();
		},
		methods: {
			// 跳转详情
			goToDe(e){
				let id = e.id;
				if(this.tabIdx==1){
					uni.navigateTo({
						url:'/pages/house/building_detail/building_detail?id='+id,
					})
				}
				
				if(this.tabIdx==16){
					uni.navigateTo({
						url:'/pages/house/building_detail_news/building_detail_news?id='+id,
					})
				}
			},
			//关闭弹窗
			closewrap() {
				
				this.showHouse=false;
				
			},

			//设置详细marker
			createMarkerdetail: function(point) {
				let marker = {
					id: point.id || 0,
					latitude: point.latitude,
					longitude: point.longitude,
					size: 'long',
					iconPath: '/static/icon/icon_map-none.png',
					callout: {
						content: point.name+'\n'+point.price,
						textAlign:'center',
						color: '#fff',
						fontSize: 10,
						borderRadius: 4,
						borderWidth: 1,
						borderColor: point.isActive?'#FF7B40':'#0091FF',
						bgColor: point.isActive?'#FF7B40':'#0091FF',
						padding: '5',
						display: 'ALWAYS'
					}
				};
				return marker;
			},

			getNowScale() {
				var that = this;
				mapCtx.getScale({
					success: function(res) {
						that.scale = res.scale
					}
				});
			},
			
			//切换楼盘/租房
			tabClick(i){
				this.keyword = '';
				if(i == this.tabIdx){
					return false;
				}
				this.tabIdx = i;
				this.enableUserZoomControl(); // 标记为用户操作
				firstload = true;
				this.refresh();
			},
			
			//刷新
			refresh(){
				this.houseList = []
				this.markers = [];
				this.currentLevel = 2;
				this.showHouse = false;
				// 默认层级
				if (firstload)
					this.scale = 13;

				if(this.tabIdx == 16){
					// 新房
					this.initData();
					
				}else{
					// 二手房
					this.initVillageData();
				}
			},
			
			//楼盘
			// 新房
			initData() {
				var that = this;
				var lat = uni.getStorageSync('now_lat') || '43.917414';
				var lng = uni.getStorageSync('now_lng') || '116.067398';
				// 默认层级
				// this.scale = 10;
				//this.latitude = lat;	//guozq modify.
				//this.longitude = lng;	//guozq modify.
				this.markers = [];
				this.houseList = [];
				this.rentalList.data = [];	//guozq modify.
				mapCtx = uni.createMapContext('map');
				functions.getAjaxData(
					'/api/xiluhouse/house/region_house_data', {
						city: this.now_city,
						// keyword: this.keyword,
						house_type_id:this.tabIdx,//1二手房 16新房
						level:1,//（1省 2市）
					},
					function(res) {
						var regionData = res.data;
						that.regionData = regionData
						//that.initFirstMarker();
						that.initSecondMarker();
					}
				);
			},
			
			//租房小区
			//二手房
			initVillageData() {
				var that = this;
				var lat = uni.getStorageSync('now_lat') || '43.917414';
				var lng = uni.getStorageSync('now_lng') || '116.067398';
				// 默认层级
				// this.scale = 10;
				//this.latitude = lat;	//guozq modify.
				//this.longitude = lng;  //guozq modify.
				this.markers = [];
				this.houseList = [];
				this.rentalList.data = [];	//guozq modify.
				mapCtx = uni.createMapContext('map');
				functions.getAjaxData(
					// /api/xiluhouse.rental/region_data'，/api/xiluhouse/house/region_house_data
					'/api/xiluhouse/house/region_house_data', {
						city: this.now_city,
						keyword: this.keyword,
						house_type_id:1,//二手房
						level:1,//（1省 2市）
					},
					function(res) {
						var regionData = res.data;
						that.regionData = regionData;
						//that.initFirstMarker();
						that.initSecondMarker();
					}
				);
			},
			
			
			// 重构：统一处理视野变化
			handleRegionChange(e) {
				// //地图缩放 偏移问题
				console.log(e)
				if (e.detail.region) {
					const region = e.detail.region;
					this.min_lat = region.southwest.latitude;
					this.max_lat = region.northeast.latitude;
					this.min_lng = region.southwest.longitude;
					this.max_lng = region.northeast.longitude;
				}
						
				if (e.type == 'end' && e.causedBy == 'scale') {
					const newScale = e.detail.scale;
					//this.scale = newScale;

					// 仅当用户没有手动控制时，才自动调整层级
					if (!this.userControlledZoom) {
						//if (newScale <= 10 && this.currentLevel !== 1) {
						//	this.currentLevel = 1;
						//	this.initFirstMarker();
						//} else 
						if (newScale <= 14 && this.currentLevel !== 2) {
							this.currentLevel = 2;
							this.initSecondMarker();
						} else if (newScale > 14 && this.currentLevel !== 3) {
							this.currentLevel = 3;
							this.initThirdMarker();
						}
					}
				}
				
			},
        
			// 重构：点击气泡处理
			handleCallout(e) {
				console.log(e.detail)
				const scale = this.scale;
				const id = e.detail.markerId;
				
				const markerId = e.detail.markerId;
				// 默认显示
				
				if (this.currentLevel === 1) {
					console.log('点击了111')
					// 市级点击：进入区级
					const region = this.regionData[markerId];
					this.enterRegion(region);
				} else if (this.currentLevel === 2) {
					console.log('点击了222')
					// 区级点击：进入街道级
					const region = this.regionData[markerId][0];
					
					this.now_region = region.region;
					this.now_street = region.street;
					this.latitude = region.lat;
					this.longitude = region.lng;
					tmpCenter.latitude = region.lat;
					tmpCenter.longitude = region.lng;
				
					// 进入第三层级
					this.currentLevel = 2;
					this.scale = 13; // 设置合适的缩放级别
					this.initThirdMarker();
					// 街道级/楼盘级：显示详情
					this.showHouseDetail(markerId);
					// 新增：打印获取到的数据坐标信息
					
				} else {
					console.log('点击了333')
					// 区级点击：进入街道级
					const region = this.regionData[markerId][0];
					
					this.now_region = region.region;
					this.now_street = region.street;
					this.latitude = region.lat;
					this.longitude = region.lng;
					tmpCenter.latitude = region.lat;
					tmpCenter.longitude = region.lng;
				
					// 进入第三层级
					this.currentLevel = 2;
					this.scale = 14; // 设置合适的缩放级别
					this.initThirdMarker();
					// 街道级/楼盘级：显示详情
					this.showHouseDetail(markerId);
				}
			},
			
			// 新增：进入区域
			enterRegion(region) {
				this.regionStack.push({
					name: region.region,
					lat: region.lat,
					lng: region.lng,
					level: this.currentLevel
				});
				this.now_region = region.region;
				this.now_street = region.street;
				this.latitude = region.lat;
				this.longitude = region.lng;
				tmpCenter.latitude = region.lat;
				tmpCenter.longitude = region.lng;
				
				// 默认层级
				// this.scale = this.currentLevel === 1 ? 14 : 16;
				// 不再强制设置缩放级别，而是平滑移动
				const targetScale = this.currentLevel === 2 ? 13 : 14;
				
							
				// 使用 moveToLocation 方法移动地图
				mapCtx.moveToLocation({
					longitude: region.lng,
					latitude: region.lat,
					success: () => {
						// 设置缩放级别
						this.scale = this.currentLevel === 2 ? 13 : 14;

						// 加载下一级数据
						if (this.currentLevel === 1) {
							this.currentLevel = 2;
							this.initSecondMarker();
						} else {
							this.currentLevel = 3;
							this.initThirdMarker();
						}
					}
				});
			},
	
			// 重构：加载市级数据
			initFirstMarker() {
				functions.getAjaxData('/api/xiluhouse/house/region_house_data', {
					city: this.now_city,
					keyword: this.keyword,
					house_type_id: this.tabIdx,
				}, res => {
					this.regionData = res.data;
					this.createMarkers(this.regionData, true);
				});
			},

			// 重构：加载区级数据
			initSecondMarker() {
				functions.getAjaxData('/api/xiluhouse/house/region_house_list', {
					region: this.now_region,
					keyword: this.keyword,
					house_type_id: this.tabIdx,
				}, res => {
					this.regionData = res.data;
					this.createMarkersSecond(this.regionData, true);
				});
			},
			
			// 重构：加载楼盘数据
			initThirdMarker() {
				
				functions.getAjaxData('/api/xiluhouse/house/region_latlng_house_data', {
					city: this.now_city,
					region: this.now_region,
					street: this.now_street,
					keyword: this.keyword,
					min_lat: this.min_lat,
					max_lat: this.max_lat,
					min_lng: this.min_lng,
					max_lng: this.max_lng,
					house_type_id: this.tabIdx
				}, res => {
					this.houseList = res.data.list;
					console.log('点击了4444')
					console.log(this.houseList)
				});
			},
	
			// 新增：统一创建标记
			createMarkers(dataList, isRegion) {
				const markers = dataList.map((item, index) => {
					return {
						id: index,
						latitude: item.lat,
						longitude: item.lng,
						iconPath: '/static/icon/icon_map-none.png',
						callout: {
							content: isRegion 
								? `${item.region}\n(${item.count} 套)`
								: `${item.name}\n${item.unit_price}元/平 ${item.price}万`,
							textAlign: 'center',
							color: '#fff',
							fontSize: 10,
							borderRadius: 4,
							borderWidth: 1,
							borderColor: '#0091FF',
							bgColor: '#0091FF',
							padding: '5',
							display: 'ALWAYS'
						}
					};
				});
				
				if (firstload && markers.length > 0) {	//guozq modify					
					const center = functions.getMapCenter(markers);
					this.longitude = center[0];
					this.latitude = center[1];
					//guozq modify
					tmpCenter.longitude = center[0];
					tmpCenter.latitude = center[1];
					firstload = false;
					//guozq
				}
				
				this.markers = markers;
			},
			// 新增：统一创建标记 第二层标识
			createMarkersSecond(dataList, isRegion) {
						
				const markers = dataList.map((item, index) => {
					const { street, name, count, avg_price, unit_price, price } = item[0];
					const hasCount = this.tabIdx !== 16;
					const avgPriceDisplay = avg_price ? Math.round(avg_price) : '';
					
					return {
						id: index,
						latitude: item[0].lat,
						longitude: item[0].lng,
						iconPath: '/static/icon/icon_map-none.png',
						callout: {
							// content: isRegion ? `${item[0].street}\n``(${this.tabIdx!=1}?(${item[0].count}套):'')`` 均价${item[0].avg_price?Math.round(item[0].avg_price):''}元/平`: `${item[0].name}\n${item[0].unit_price}元/平 ${item[0].price}万 `,
							content: isRegion? `${street}${hasCount ? `\n(${count}套)` : ''}${avgPriceDisplay ? ` 均价${avgPriceDisplay}元/平` : ''}`: `${name}\n${unit_price}元/平 ${price}万`,
							textAlign: 'center',
							color: '#fff',
							fontSize: 10,
							borderRadius: 4,
							borderWidth: 1,
							borderColor: '#0091FF',
							bgColor: '#0091FF',
							padding: '5',
							display: 'ALWAYS'
						}
					};
				});
				
				if (firstload && markers.length > 0) {	//guozq modify
					const center = functions.getMapCenter(markers);
					this.longitude = center[0];
					this.latitude = center[1];
					//guozq modify
					tmpCenter.longitude = center[0];
					tmpCenter.latitude = center[1];
					firstload = false;
					//guozq
				}
				
				this.markers = markers;
			},
			
			// 新增：显示楼盘详情
			showHouseDetail(index) {
				this.now_house_index = index;
				this.showHouse = true;
				
				// 高亮选中的标记
				this.markers = this.markers.map((marker, i) => {
					return {
						...marker,
						callout: {
							...marker.callout,
							borderColor: i === index ? '#FF7B40' : '#0091FF',
							bgColor: i === index ? '#FF7B40' : '#0091FF'
						}
					};
				});
			},
			
			// 新增：返回上一级
			backToPreviousLevel() {
				if (this.regionStack.length > 0) {
					const prev = this.regionStack.pop();
					this.now_region = prev.name;
					this.latitude = prev.lat;
					this.longitude = prev.lng;
					tmpCenter.latitude = prev.lat;	//guozq modify.
					tmpCenter.longitude = prev.lng;	//guozq modify.

					// 默认层级
					this.scale = prev.level === 2 ? 12 : 14;
					this.currentLevel = prev.level;
					
					//if (prev.level === 1) {
					//	this.initFirstMarker();
					//} else {
						this.initSecondMarker();
					//}
				}
			},


			doSearch(e) {
				this.keyword = e.detail.value?e.detail.value:this.keyword;
				this.currentLevel = 2;
				this.showHouse = false;
				// 默认层级
				// this.scale = 10;
				this.enableUserZoomControl(); // 标记为用户操作
				firstload = true;
				this.refresh();
			},
			villageRentalList(){
				let that = this;
				var json = {
					city: that.now_city,
					village_id: that.villageId
				};
				json.page = Number(that.rentalList.current_page) + 1;
				functions.getAjaxList(that, '/api/xiluhouse/rental/house_list', json, function(res) {
					var rentalList = res.data;
					if (json.page > 1) {
						var now_rentalList_data = that.rentalList.data || [];
						var now_rentalList_data = now_rentalList_data.concat(rentalList.data);
						rentalList.data = now_rentalList_data;
					}
					that.rentalList = rentalList;
				});
			},
					
			// 新增方法：允许用户手动控制缩放
			enableUserZoomControl() {
				this.userControlledZoom = true;
				// 5秒后自动重置，防止永久锁定
				setTimeout(() => {
					this.userControlledZoom = false;
				}, 5000);
			},

			
			mapClick(i){
				this.mapTpye = i;
				this.enableUserZoomControl(); // 标记为用户操作
				// 默认层级
				// this.scale = 10;
			}
		}
	}
</script>

<style lang="less" scoped>
	.mapbox {
		height: 100vh;
		transition: all ease-in .5s;

		&.hide {
			height: calc(100vh - 340rpx);
		}
	}

	.customCallout {
		height: 60rpx;
		background: #0091FF;
		color: #fff;
		box-shadow: 0px 4rpx 40rpx 0px rgba(3, 103, 179, 0.3);
		border-radius: 50rpx;
		padding: 0 30rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: visible;
		font-size: 28rpx;

		&::after {
			content: "";
			display: block;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10rpx 10rpx 0;
			border-color: #0091FF transparent transparent;
			position: absolute;
			bottom: -10rpx;
			left: 0;
			right: 0;
			margin: auto;
		}

		&.active {
			background-color: #FF7B40;
		}

		&.active::after {
			border-color: #FF7B40 transparent transparent;
		}
	}

	.areas {
		position: absolute;
		top: 20rpx;
		left: 40rpx;
		right: 40rpx;
		z-index: 9;
	}

	.city-picker {
		width: 150rpx;
		height: 70rpx;
		border-radius: 50rpx;
		background-color: rgba(255, 255, 255, 1);
		color: #010101;
		font-size: 24rpx;
	}

	.city-picker::after {
		width: 0;
		content: "";
		display: block;
		margin-top: 4rpx;
		margin-left: 15rpx;
		height: 0;
		border-top: 8rpx solid #ccc;
		border-right: 7.5rpx solid transparent;
		border-bottom: 8rpx solid transparent;
		border-left: 7.5rpx solid transparent;
	}

	.inputbox {
		width: 500rpx;
		height: 70rpx;
		border-radius: 50rpx;
		background-color: rgba(255, 255, 255, 1);
		color: #010101;
		margin-left: 20rpx;
		padding: 0 30rpx;
	}

	.icon_search {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}

	.inputbox input {
		color: #010101;
		font-size: 24rpx;
	}

	.houselist {
		height: 0;
		position: absolute;
		background-color: #fff;
		border-radius: 60rpx 60rpx 0 0;
		bottom: 0;
		left: 0;
		right: 0;
		transition: all .3s;
		border: none;
		padding: 0 40rpx;
		z-index: 999;
	}

	.houselist.show {
		// height: 340rpx;
		height: auto;
		max-height: 800rpx;
		overflow-y: scroll;
	}

	.houselist .houseadd {
		font-size: 34rpx;
		padding-bottom: 13rpx;
		line-height: 34rpx;
	}

	.houselist .housedetail {
		font-size: 24rpx;
		padding-bottom: 28rpx;
		line-height: 34rpx;
		color: #898989;
		border-bottom: 1px solid #f4f3f3;
	}

	@keyframes fadeHide {
		0% {
			opacity: 0;
			height: 0;
			visibility: hidden;
		}

		100% {
			opacity: 1;
			height: 790rpx;
			visibility: visible;
		}
	}

	.closebox {
		padding: 15rpx 0;
		position: sticky;
		z-index: 99;
		top: 0;
		background-color: #FFF;
	}

	.closebox .icon_close {
		width: 25rpx;
		height: 25rpx;
		margin: 0 auto;
		display: block;
	}

	.scrollbox {
		height: 440rpx;
		width: 100%;
	}

	#map {
		width: 100%;
		height: 100%;
		transition: all .3s;
	}

	.mapbox {
		transition: all .3s;
	}

	.contact {
		padding: 29rpx 0 40rpx;
	}

	.icon_avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.contact button.conbtn {
		width: 70rpx;
		height: 70rpx;
		padding: 0;
		margin: 0 0 0 30rpx;
	}

	.contact .conbtn image {
		width: 70rpx;
		height: 70rpx;
	}

	.houselist .houseitem {
		padding-bottom: 30rpx;
	}

	.houselist .houseitem .houseimg {
		width: 240rpx;
		height: 190rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.houselist .housename {
		font-size: 30rpx;
		padding-bottom: 10rpx;
	}

	.houselist .area-size {
		font-size: 24rpx;
		color: #898989;
	}

	.houselist .targetbox {
		padding: 14rpx 0 0;
	}

	.houselist .targetitem {
		padding: 2rpx 4rpx;
		background: #cce9ff;
		font-size: 18rpx;
		color: #0091ff;
		border-radius: 2rpx;
		margin-right: 10rpx;
		margin-bottom: 12rpx;
	}

	.houselist .housecost {
		color: #f8532f;
		font-size: 24rpx;
	}

	.houselist .housecost text {
		font-size: 34rpx;
	}

	.houselist .event {
		padding-top: 11rpx;
		font-size: 18px;
		color: #898989;
	}

	.houselist .event .bao {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: 18rpx;
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(180deg, #00C4FF, #0091FF);
		color: #fff;
		margin-right: 10rpx;
	}

	.houselist .event .dong {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: 18rpx;
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(270deg, #FF6635, #FFB45C);
		color: #fff;
		margin-right: 10rpx;
	}
	.fix-btn-left{
		position: fixed;
		right: 110rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #0091FF;
		line-height: 80rpx;
		text-align: center;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.fix-btn{
		position: fixed;
		right: 30rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 50%;
		background-color: #0091FF;
		text-align: center;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.fix-btn.active{
		background-color: #FF6635;
	}
	.fix-btn-left.active{
		background-color: #FF6635;
	}
	.fix-btn1{
		width: 120rpx;
		height: 120rpx;
		line-height: 120rpx;
		bottom: 520rpx;
	}
	.fix-btn2{
		width: 120rpx;
		height: 120rpx;
		line-height: 120rpx;
		bottom: 350rpx;
	}
	.fix-btn3{
		top: 100rpx;
		border-radius: 0%;
	}
	
	// 新房二手房 

	.houselist {
		
	}

	.houselist .houseitem {
		position: relative;
		padding-top: 30rpx;

		.targets {
			position: absolute;
			top: 15rpx;
			left: 15rpx;
			z-index:9;
		}

		.targets view {
			padding: 2rpx 4rpx;
			color: var(--white);
			font-size: var(--fs16);
			margin-right: 10rpx;
			border-radius: 2rpx;
		}

		.targets .tar1 {
			background-color: #FF7B40;
		}

		.targets .tar2 {
			background-color: #FE6075;
		}

		.targets .tar3 {
			background-color: var(--blue);
		}
	}

	.houselist .houseitem .houseimg {
		width: 240rpx;
		height: 190rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.houselist .housename {
		font-size: var(--fs30);
		padding-bottom: 10rpx;
	}

	.houselist .area-size {
		font-size: var(--fs24);
		color: #898989;
	}

	.houselist .targetbox {
		padding: 14rpx 0 0;
		white-space: nowrap;
		overflow-x: scroll;
		width: 100%;
	}

	.houselist .targetitem {
		padding: 2rpx 4rpx;
		background: #cce9ff;
		font-size: var(--fs18);
		color: var(--normal);
		border-radius: 2rpx;
		margin-right: 10rpx;
		margin-bottom: 12rpx;
	}

	.houselist .housecost {
		color: var(--red);
		font-size: var(--fs24);
	}

	.houselist .housecost text {
		font-size: var(--fs34);
	}
	.houselist .housecost .junjia{
		font-size: var(--fs24);
		color: #999;
	}

	.houselist .event {
		padding-top: 11rpx;
		font-size: var(--fs18);
		color: #898989;
	}

	.houselist .event .bao {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: var(--fs18);
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(180deg, #00C4FF, var(--normal));
		color: var(--white);
		margin-right: 10rpx;
	}

	.houselist .event .dong {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: var(--fs18);
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(270deg, #FF6635, #FFB45C);
		color: var(--white);
		margin-right: 10rpx;
	}

	.houselist .event .hot {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: var(--fs18);
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(270deg, #ff5232 0%, #ff6635 100%);
		color: var(--white);
		margin-right: 10rpx;
	}

</style>
